<template>
  <div class="form">
    <el-form ref="detailsForm" :disabled="disabled" :model="model" :rules="disabled ? {} : formRules"
             label-width="94px">
      <el-form-item v-if="has('贬损大类')" label="贬损大类：" prop="derogatoryCategories">
        <el-select v-model="model.derogatoryCategories" :disabled="isFromMessage" @change="handleDerogatoryCategories">
          <el-option label="卖场" value="1"></el-option>
          <el-option label="安装" value="2"></el-option>
          <el-option label="送货" value="3"></el-option>
          <el-option label="品牌" value="4"></el-option>
          <el-option label="服务" value="5"></el-option>
          <el-option label="产品" value="6"></el-option>
          <el-option label="其他" value="0"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item v-if="has('贬损原因')" label="贬损原因：" prop="derogatoryReason">
        <el-input v-model="model.derogatoryReason" :disabled="isFromMessage" placeholder="请输入贬损原因使用;隔开"></el-input>
      </el-form-item>

      <el-form-item v-if="has('责任人')" label="责任人：" prop="personCharge">
        <el-input v-model="model.personCharge" readonly style="width: 400px;"></el-input>
        <el-button class="mgl10px" v-if="reassignBtnVisibel" type="primary" plain @click="personChargeDialog = true">
          重新指派
        </el-button>
      </el-form-item>

      <el-form-item v-if="has('分公司')" label="分公司：" prop="branchCompany" :rules="branchCompanyValidateRules">
        <el-input v-model="model[branchCompanyField]" readonly style="width: 400px;"></el-input>
        <el-button v-if="!disabled" class="mgl10px" type="primary" plain @click="branchCompanyDialog = true">选择分公司
        </el-button>
      </el-form-item>

      <el-form-item v-if="has('意见')" label="意见：" prop="suggestion">
        <el-input type="textarea" v-model="model.suggestion" :rows="3" :placeholder="suggestionPlaceholder"></el-input>
      </el-form-item>

      <el-form-item v-if="has('求助原因')" label="求助原因：" prop="seekHelpReason">
        <el-input type="textarea" v-model="model.seekHelpReason" :rows="3" placeholder="请输入求助原因"></el-input>
      </el-form-item>

      <el-form-item v-if="has('沟通内容')" :label="getLabel() + '内容：'" :prop="commuContent">
        <el-input type="textarea" v-model="model[commuContent]" :rows="3"
                  :placeholder="`请输入${getLabel()}内容`"></el-input>
      </el-form-item>

      <el-form-item v-if="has('跟进方式')" label="跟进方式：" :prop="followWay">
        <!--<el-select v-if="model.followResult == 0" v-model="model.cptFollowWay">-->
        <!--<el-option label="电话" value="1"></el-option>-->
        <!--<el-option label="微信" value="2"></el-option>-->
        <!--<el-option label="短信" value="3"></el-option>-->
        <!--<el-option label="上门" value="4"></el-option>-->
        <!--<el-option label="其他" value="0"></el-option>-->
        <!--</el-select>-->
        <!--<el-input v-if="model.followResult == 2" v-model="model.hpFollowWay" type="textarea" :rows="1"></el-input>-->
        <el-select v-model="model[followWay]">
          <el-option label="电话" value="1"></el-option>
          <el-option label="微信" value="2"></el-option>
          <el-option label="短信" value="3"></el-option>
          <el-option label="上门" value="4"></el-option>
          <el-option label="其他" value="0"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item v-if="has('处理证据')" class="proves" :label="getLabel() + '证据：'">
        <a ref="downloadLink" download hidden></a>
        <el-row v-for="(item, index) in proves" :key="index">
          <el-col :span="24">
            <img :src="getMimeIcon(item.type)" class="mime-icon">
            <a href="javascript:;" @click="triggerDownload(item.url)"><span
              class="mime-title">{{getFileName(item.url)}}</span></a>
            <span class="mime-size">({{getFileSize(item.size)}})</span>
            <a class="mime-download" href="javascript:;" @click="triggerDownload(item.url)"><i
              class="el-icon-download"></i></a>
          </el-col>
        </el-row>
      </el-form-item>

      <template v-if="has('分公司管理员处理')">
        <el-form-item label="跟进结果：" prop="followResult">
          <el-radio-group v-model="model.followResult">
            <el-radio :label="0">完成</el-radio>
            <el-radio :label="1">申诉</el-radio>
            <el-radio :label="2">求助</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="model.followResult === 2" label="求助原因：" prop="seekHelpReason">
          <el-input type="textarea" :rows="3" v-model="model.seekHelpReason"></el-input>
        </el-form-item>
        <el-form-item :label="getLabel() + '内容：'" :prop="commuContent">
          <el-input type="textarea" :rows="3" v-model="model[commuContent]"></el-input>
        </el-form-item>
        <!--<el-form-item v-if="model.followResult === 0" label="跟进方式：" prop="cptFollowWay">-->
        <!--<el-select v-model="model.cptFollowWay">-->
        <!--<el-option label="电话" :value="1"></el-option>-->
        <!--<el-option label="微信" :value="2"></el-option>-->
        <!--<el-option label="短信" :value="3"></el-option>-->
        <!--<el-option label="上门" :value="4"></el-option>-->
        <!--<el-option label="其他" :value="0"></el-option>-->
        <!--</el-select>-->
        <!--</el-form-item>-->
        <!--<el-form-item v-if="model.followResult === 2" label="跟进方式：" prop="hpFollowWay">-->
        <!--<el-input type="textarea" :rows="3" v-model="model.hpFollowWay"></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="跟进方式：" prop="cptFollowWay">
          <el-select v-model="model[followWay]">
            <el-option label="电话" :value="1"></el-option>
            <el-option label="微信" :value="2"></el-option>
            <el-option label="短信" :value="3"></el-option>
            <el-option label="上门" :value="4"></el-option>
            <el-option label="其他" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item ref="uploadForm" :label="getEvidenceLabel() + '证据：'" prop="upload">
          <el-upload
            class="upload"
            multiple
            ref="upload"
            action="http://upload-z2.qiniup.com"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :before-upload="uploadBefore"
            :on-remove="uploadRemove"
            :on-change="uploadChange"
            :headers="uploadHeaders"
            :data="upload.params"
            :file-list="upload.fileList"
            :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">上传附件</el-button>
            <el-button class="mgl10px"
                       v-show="submitUploadBtnVisible"
                       size="small"
                       type="success"
                       @click="submitUpload">
              确认上传
            </el-button>
            <div slot="tip" class="el-upload__tip">附件可包含图片、视频、录音文件</div>
          </el-upload>
        </el-form-item>
      </template>

    </el-form>

    <!-- 重新指派责任人对话框 -->
    <el-dialog title="选择责任人" :visible.sync="personChargeDialog" custom-class="dialog_issue">
      <saler-list :showAuth="false" :showSync="false" @onSelectUser="handleSelectPersonCharge"></saler-list>
      <div class="selected_user">
        <div class="title" v-show="!personCharge.username">请选择责任人</div>
        <div class="user_item" v-show="personCharge.username">
          {{personCharge.username}}
          <i class="el-icon-close" @click="handleRemovePersonCharge"></i>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="personChargeDialog = false">取 消</el-button>
        <el-button type="primary" @click="handlePersonCharge">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="选择分公司" :append-to-body="true" :visible.sync="branchCompanyDialog" custom-class="dialog_issue">
      <div class="companylist">
        <el-input v-model="searchCompany" placeholder="搜索分公司" @keyup.enter.native="handleFilterBranchCompany">
          <el-button slot="append" @click="handleFilterBranchCompany">搜索</el-button>
        </el-input>
        <el-row class="companytree">
          <el-col :span="24">
            <el-tree
              ref="tree"
              node-key='id'
              :data="branchCompanyList"
              :props="{label:'departmentName'}"
              :filter-node-method="filterTree"
              @node-click="handleSelectBranchCompany">
            </el-tree>
          </el-col>
        </el-row>
      </div>
      <div class="selected_user">
        <div class="title" v-show="!branchCompany.departmentName">请选择分公司</div>
        <div class="user_item" v-show="branchCompany.departmentName">
          <span>{{branchCompany.departmentName}}</span>
          <i class="el-icon-close" @click="handleRemoveBranchCompany"></i>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="branchCompanyDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleBranchCompany">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {mapState, mapGetters} from 'vuex'
  import salerList from '@/components/common/sysManage/salerList'
  import imageIcon from './icons/image.png'
  import audioIcon from './icons/audio.png'
  import videoIcon from './icons/video.png'
  import {getDepartment, getUploadToken, getDownloadUrl} from '@/service/getData'

  export default {
    components: {salerList},
    props: {
      disabled: {
        type: Boolean,
        default: false
      },
      data: {
        type: Object,
        default: () => ({})
      },
      validateFields: {
        type: Object,
        default: () => ({
          branchCompany: true
        })
      },
      isFromMessage: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        form: {
          derogatoryCategories: '1',
          derogatoryReason: '',
          suggestion: '',
          seekHelpReason: '',
          cptCommuContent: '',
          hpCommuContent: '',
          cptFollowWay: 1,
          hpFollowWay: '',
          followResult: 0,
          personCharge: '',
          personChargeId: '',
          branchCompany: '',
          branchCompanyId: '',
          upload: false
        },
        formRules: {
          derogatoryCategories: [
            {required: true, message: '请选择贬损大类', trigger: 'blur'},
          ],
          derogatoryReason: [
            {required: true, message: '请输入贬损原因', trigger: 'blur'},
          ],
          personCharge: [
            {required: true, message: '请指派责任人', trigger: 'blur'},
          ],
          followResult: [
            {required: true, message: '请选择跟进结果', trigger: 'blur'},
          ],
          cptCommuContent: [
            {required: true, message: '请输入沟通内容', trigger: 'blur'},
          ],
          hpCommuContent: [
            {required: true, message: '请输入沟通内容', trigger: 'blur'},
          ],
          appealContent: [
            {required: true, message: '请输入申诉内容', trigger: 'blur'},
          ],
          seekHelpReason: [
            {required: true, message: '请输入求助原因', trigger: 'blur'},
          ],
          hpFollowWay: [
            {required: true, message: '请输入跟进方式', trigger: 'blur'},
          ],
          cptFollowWay: [
            {required: true, message: '请输入跟进方式', trigger: 'blur'},
          ],
          upload: [
            {required: true, message: '请上传证据', trigger: 'blur'},
          ]
        },
        upload: {
          fileList: [],
          params: {
            token: ''
          }
        },
        uploadResponse: [],
        personCharge: {},
        branchCompany: {},
        personChargeDialog: false,
        branchCompanyDialog: false,
        branchCompanyList: [],
        searchCompany: ''
      }
    },
    computed: {
      ...mapState({
        platformType: state => state.disparageManage.platformType,
        ctype: state => state.disparageManage.ctype,
        currentOrderUserType: state => state.disparageManage.currentOrderUserType,
        currentOrderCtype: state => state.disparageManage.currentOrderCtype,
        currentOrderStatus: state => state.disparageManage.currentOrderStatus,
        currentOrderDetails: state => state.disparageManage.currentOrderDetails
      }),
      ...mapGetters([
        'userType',
        'disparageType'
      ]),

      // 是否分公司管理员
      isFGLY() {
        return this.currentOrderUserType === this.platformType.FGLY
      },

      // 销售代表
      isXSDB() {
        return this.currentOrderUserType === this.platformType.XSDB
      },

      // 分公司字段名
      branchCompanyField() {
        return this.disabled ? 'branchCompanyName' : 'branchCompany'
      },

      // 校验分公司
      branchCompanyValidateRules() {
        const required = !this.disabled && this.has('分公司') && this.validateFields.branchCompany
        const rule = {required: required, message: '请选择分公司', trigger: 'blur'}
        return rule
      },

      // 审批流展示或者审批操作数据源
      model() {
        return this.disabled ? this.data : this.form;
      },

      // 是否显示指派责任人按钮
      reassignBtnVisibel() {
        const items = ['1', '13']
        return !this.disabled && this.isFGLY && items.indexOf(this.currentOrderStatus) > -1
      },

      // 意见placeholder
      suggestionPlaceholder() {
        return this.disabled ? '' : '请输入意见'
      },

      // 证据
      proves() {
        const fields = ['cptDealEvidence', 'appealEvidence', 'hpDealEvidence']
        const index = this.data.followResult
        const field = fields[index]
        let proves
        try {
          proves = JSON.parse(this.data[field])
        } catch (err) {
          proves = []
        }
        return proves
      },

      // 跟进方式字段名
      followWay() {
        const fields = ['cptFollowWay', '', 'hpFollowWay']
        return fields[this.model.followResult]
      },

      // 沟通内容字段名
      commuContent() {
        const fields = ['cptCommuContent', 'appealContent', 'hpCommuContent']
        return fields[this.model.followResult]
      },

      // 文件上传附加的头部
      uploadHeaders() {
        return {
          UBToken: localStorage.getItem('UBToken')
        }
      },

      // 是否显示确认上传按钮
      submitUploadBtnVisible() {
        return this.upload.fileList.length > 0;
      },

      // 确定表单组件
      formItems() {
        const YYZX = this.platformType.YYZX  // 用户运营中心
        const XSZB = this.platformType.XSZB  // 销司总部
        const XSDB = this.platformType.XSDB  // 销售代表
        const FGLY = this.platformType.FGLY  // 分公司管理员
        if (this.disabled) {
          const flowUserType = this.checkUserType(this.data.characterId)
          const flowCtype = this.data.ctype
          if (flowUserType === YYZX) {
            return this.getFormIsYYZX(flowCtype)
          }
          if (flowUserType === XSZB) {
            return this.getFormIsXSZBInFlow(flowCtype, this.data.operation)
          }
          if (flowUserType === FGLY || flowUserType === XSDB) {
            return this.getFormIsFGLYInFlow(this.data.operation, this.data.followResult)
          }
          return []
        }
        const userType = this.currentOrderUserType
        if (userType === YYZX) {
          return this.getFormIsYYZX(this.currentOrderCtype)
        }
        if (userType === XSZB) {
          return this.getFormIsXSZB(this.currentOrderCtype, this.currentOrderStatus)
        }
        if (userType === FGLY) {
          return this.getFormIsFGLY(this.currentOrderStatus)
        }
        return []
      },

      //

      // 来源message
      // isFromMessage() {
      //   let baseInfo = {}
      //   let fieldName = ''
      //   let isFromMessage = false
      //   if('npsBaseInfo' in this.currentOrderDetails) {
      //     baseInfo = this.currentOrderDetails.npsBaseInfo || {}
      //     fieldName = 'salesSectionRecommendationLevelComment'
      //     isFromMessage = baseInfo.npsFlag === 'message'
      //   }else{
      //     baseInfo = this.currentOrderDetails || {}
      //     fieldName = 'derogatoryReason'
      //     isFromMessage = /^\[/.test(baseInfo[fieldName])
      //   }
      //   this.form.derogatoryCategories = '1'
      //   this.form.derogatoryReason = this.form.derogatoryReason
      //   this.form.derogatoryReason = this.getReason(baseInfo[fieldName])
      //   return isFromMessage
      // }
    },
    created() {

    },
    watch: {
      isFromMessage: {
        immediate: true,
        handler: function () {
          let baseInfo = {}
          let fieldName = ''
          if ('npsBaseInfo' in this.currentOrderDetails) {
            baseInfo = this.currentOrderDetails.npsBaseInfo || {}
            fieldName = 'salesSectionRecommendationLevelComment'
          } else {
            baseInfo = this.currentOrderDetails || {}
            fieldName = 'derogatoryReason'
          }
          this.form.derogatoryCategories = '1'
          this.form.derogatoryReason = this.getReason(baseInfo[fieldName])
        }
      }
    },
    methods: {

      // 检测用户类型
      checkUserType(characterId) {
        const regs = [/^_a_g_umc/, /^_a_g_xs/, /^_a_g_d_/, /^_a_u_/]
        const index = regs.findIndex(item => item.test(characterId))
        return index > -1 ? regs[index].toString().replace(/[/^]/g, '') : ''
      },

      // 判断需要哪些组件
      has(name) {
        return this.formItems.indexOf(name) > -1
      },

      // 用户运营中心表单
      getFormIsYYZX(ctype) {
        return ctype === 0 ? ['贬损大类', '贬损原因', '意见'] : ['意见']
      },

      // 销司总部操作表单
      getFormIsXSZB(ctype, status) {
        switch (ctype) {
          case 0:
            return ['分公司', '意见']
          case 2:
            return status === '1' ? ['分公司', '意见'] : ['意见']
          default:
            return ['意见']
        }
      },

      // 销司总部流展示表单
      getFormIsXSZBInFlow(ctype, operation) {
        switch (ctype) {
          case 0:
            return ['分公司', '意见']
          case 2:
            return operation === '下发' ? ['分公司', '意见'] : ['意见']
          default:
            return ['意见']
        }
      },

      // 分公司管理员操作表单
      getFormIsFGLY(status) {
        const isNext = ['1', '13'].indexOf(status) > -1
        const isHandle = ['2', '11'].indexOf(status) > -1
        return isNext ? ['责任人', '意见'] : isHandle ? ['分公司管理员处理'] : []
      },

      // 分公司管理员流展示表单
      getFormIsFGLYInFlow(operation, followResult) {
        if (operation === '下发') {
          return ['责任人', '意见']
        }
        switch (followResult) {
          case '1':
            return ['沟通内容', '处理证据']
          case '2':
            return ['求助原因', '沟通内容', '跟进方式', '处理证据']
          default:
            return ['沟通内容', '跟进方式', '处理证据']
        }
      },

      // 贬损大类onChange
      handleDerogatoryCategories(value) {
        this.$emit('derogatory-categories-change', value)
      },

      // 树节点点击选中
      handleNodeClick(obj) {
        this.handleSelectBranchCompany(obj)
      },

      // 搜索树
      filterTree(value, data) {
        if (!value) {
          return true
        }
        return data.departmentName.indexOf(value) !== -1
      },

      // 搜索树
      handleFilterBranchCompany() {
        this.$refs.tree.filter(this.searchCompany)
      },

      // 获取文件类型对应图标
      getMimeIcon(n) {
        let mime = [videoIcon, audioIcon, imageIcon]
        return mime[n]
      },

      // 获取文件名
      getFileName(path) {
        return /attname=(\S+)/ig.test(path) ? decodeURIComponent(RegExp.$1) : '未知文件'
      },

      // 文件大小单位转换
      getFileSize(byte) {
        const pow = Math.pow
        const p1 = 1024
        const p2 = pow(p1, 2)
        const p3 = pow(p1, 3)
        const p4 = pow(p1, 4)
        const getSize = (p, unit) => (byte / p).toFixed(2) + unit
        let size = ''
        if (byte < p1) {
          size = byte + 'B'
        } else if (byte < p2) {
          size = getSize(p1, 'KB')
        } else if (byte < p3) {
          size = getSize(p2, 'MB')
        } else if (byte < p4) {
          size = getSize(p3, 'GB')
        } else {
          size = '大于1TB'
        }
        return size
      },

      // 更换文本
      getLabel() {
        let words = ['沟通', '申诉', '求助']
        return words[this.model.followResult] || ''
      },

      // 处理证据文本
      getEvidenceLabel() {
        let words = ['处理', '申诉', '处理']
        return words[this.model.followResult] || ''
      },

      // 上传校验，接受图片、音频、视频格式，没有大小限制
      async uploadBefore(file) {
        let acceptReg = /^(image|audio|video)\//i
        if (!acceptReg.test(file.type)) {
          this.$message.warning('只接受图片、音频和视频格式文件！')
          return false
        }
        const res = await getUploadToken()
        this.upload.params.token = res.data.data
        return false
      },

      // 上传成功
      uploadSuccess(res, file, fileList) {
        const type = [/^video\//i, /^audio\//i, /^image\//i]
        this.uploadResponse.push({
          type: type.findIndex(item => item.test(file.type || file.raw.type)),
          size: res.fsize,
          url: res.key + '?attname=' + encodeURIComponent(file.name)
        })
        this.form.upload = true
      },

      // 上传出错
      uploadError(res, file) {
        this.$message.error('上传失败！')
      },

      // 移除已选文件
      uploadRemove(file, fileList) {
        this.upload.fileList = fileList.slice()
      },

      // 文件列表改变
      uploadChange(file, fileList) {
        this.upload.fileList = fileList.slice()
      },

      // 确认上传
      submitUpload() {
        this.$refs.upload.submit()
      },

      // 文件下载
      async triggerDownload(url) {
        const res = await getDownloadUrl(url)
        const link = this.$refs.downloadLink
        link.href = res.data.data
        link.click()
        return false
      },

      // 设置责任人
      setPersonCharge(id, name) {
        this.form.personChargeId = id
        this.form.personCharge = name
      },

      // 选择责任人
      handleSelectPersonCharge(personCharge) {
        this.personCharge = personCharge
      },

      // 删除已选列表中的责任人
      handleRemovePersonCharge() {
        this.personCharge = {}
      },

      // 确认责任人
      handlePersonCharge() {
        const id = this.personCharge.userId
        const name = this.personCharge.username
        if (!id || !name) {
          this.$message.closeAll()
          this.$message.warning('该责任人不能被选中！')
        }
        this.setPersonCharge(id, name)
        this.personCharge = {}
        this.personChargeDialog = false
      },

      // 自动填充分公司
      async autoFillBranchCompany(name) {
        if (this.disabled || !this.has('分公司')) {
          return
        }
        if (!this.branchCompanyList.length) {
          const res = await getDepartment()
          this.branchCompanyList = res.data.data
        }
        const obj = this.branchCompanyList.filter(item => item.departmentName === name)[0]
        obj && this.setBranchCompany(obj.departmentId, obj.departmentName)
      },

      // 设置分公司
      setBranchCompany(id, name) {
        this.form.branchCompanyId = id
        this.form.branchCompany = name
      },

      // 选择分公司
      handleSelectBranchCompany(company) {
        this.branchCompany = company
      },

      // 移除分公司
      handleRemoveBranchCompany() {
        this.branchCompany = {}
      },

      // 确认已选择分公司
      handleBranchCompany() {
        this.setBranchCompany(this.branchCompany.departmentId, this.branchCompany.departmentName)
        this.branchCompany = {}
        this.branchCompanyDialog = false
      },

      // 表单校验
      validate(callback) {
        return this.$refs.detailsForm.validate(callback)
      },

      // 重置表单
      resetForm() {
        this.$refs.detailsForm.resetFields()
      },

      // 格式化原因
      getReason(data) {
        try {
          let reasons = data.replace(/;$/, '')
          reasons = JSON.parse(reasons)
          return reasons.map((reason, i) => {
            const key = reason.category
            const val = reason.content.join('，') || '无'
            return `${key}：${val}`
          }).join('；')
        } catch (e) {
          return data
        }
      },

    }
  }
</script>

<style lang="scss">

  .mgl10px {
    margin-left: 10px;
  }

  .proves {
    i {
      font-size: 20px;
    }
    i, span {
      margin-right: 10px;
      vertical-align: middle;
    }
    a {
      text-decoration: none;
      color: #409EFF;
    }
    .mime-icon {
      height: 24px;
      vertical-align: middle;
    }
    .mime-title {
      margin-right: 30px;
    }
    .mime-size {

    }
    .el-icon-download {
      color: #5e6b7c;
      &:hover {
        color: #67C23A;
      }
    }
  }

  .dialog_issue {
    & {
      width: 900px
    }
    .el-dialog__body {
      box-sizing: border-box;
      max-height: 400px;
      padding: 30px 20px;
      overflow: auto;
      &:after {
        content: '';
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
      }
    }
    .saler_list {
      float: left;
      box-sizing: border-box;
      width: calc(100% - 160px);
      .group_list {
        flex: 1 0;
        /*box-sizing: border-box;*/
        /*width: 50%;*/
        .el-input {
          width: 100%;
        }
      }
      .user_list {
        flex: 1 0;
        min-width: unset;
        max-width: 50%;
      }
      .user_item {
        box-sizing: border-box;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        user-select: none;
        &:hover {
          background-color: #f5f7fa;
        }
      }
    }
    .selected_user {
      float: right;
      width: 150px;
      box-sizing: border-box;
      min-height: 340px;
      overflow-x: hidden;
      & {
        /*margin-left: 620px;*/
        padding: 10px;

        border: 1px solid #D1DBE5;
      }
      .title {
        margin-bottom: 10px;
      }
      .user_item {
        margin-bottom: 10px;
      }
      .user_item img {
        width: 26px;
        height: 26px;
      }
      .el-icon-close {
        float: right;
        padding-top: 7px;
        font-size: 12px;
        cursor: pointer;
      }
      span {
        display: inline-block;
        max-width: 202px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .companylist {
    float: left;
    width: 600px;
  }

  .companytree {
    margin-top: 20px;
  }

</style>
